<template>
  <view class="custom-navbar">
    <u-navbar :title="navTitle" :safe-area-inset-top="true" :placeholder="true" :border="border" @leftClick="leftClick">
      <template #left>
        <!-- <u-icon name="arrow-left" size="19"></u-icon> -->
        <slot name="left"></slot>
      </template>
      <template #right>
        <slot name="right"></slot>
      </template>
    </u-navbar>
  </view>
</template>

<script>
export default {
  name: 'Navbar',
  props: {
    border: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      navTitle: '',
      pages: null
    }
  },
  created() {
    this.pages = getCurrentPages()
    // console.log(this.pages[this.pages.length - 1])
    if (this.pages[this.pages.length - 1].$page.meta) {
      this.navTitle = this.pages[this.pages.length - 1].$page.meta.navigationBar.titleText
    }
  },
  methods: {
    leftClick() {
      if (this.pages && this.pages.length > 1) {
        uni.navigateBack({
          delta: 1
        })
      } else {
        history.back()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-navbar {

  :deep(.u-icon__icon),
  :deep(.u-navbar__content__title) {
    font-weight: bold !important;
  }
}
</style>
